<script setup>
import { articleGetchannelList } from '@/api/article'
import { ref, defineEmits, defineModel } from 'vue'
// 接受父组件传递的cate_id
defineModel({
  modelValue: {
    type: [Number, String],
  },
})

const emit = defineEmits(['update:modelValue'])

const handleCateChange = (val) => {
  console.log(val)
}

// 定义空数据 存储文章列表
const articleList = ref([])
// 封装方法 获取文章列表数据
const getArticle = async () => {
  const res = await articleGetchannelList()
  articleList.value = res.data.data
}

// 一进页面就调用
getArticle()
</script>

<template>
  <el-form-item>
    <!-- 给选项渲染数据 添加数据更改监听 数据更改的时候就将当前选项给父组件传递赋值 -->
    <el-select
      style="width: 200px"
      placeholder="请选择"
      @change="handleCateChange"
      :modelValue="modelValue"
      @update:modelValue="emit('update:modelValue', $event)"
    >
      <el-option
        v-for="item in articleList"
        :key="item.id"
        :label="item.cate_name"
        :value="item.id"
      ></el-option>
    </el-select>
  </el-form-item>
</template>
